<!DOCTYPE html>
<head>
	<script src="scripts/jquery-2.0.3.js" type="text/javascript"></script>

	<!--
	<script src="scripts/jquery-ui-1.10.3.custom/development-bundle/ui/jquery.ui.core.js"></script>
	<script src="scripts/jquery-ui-1.10.3.custom/development-bundle/ui/jquery.ui.widget.js"></script>
	-->

	<script src="scripts/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
	<script src="scripts/ot.viewer-1.0.0.js" type="text/javascript"></script>

    <link href="styles/default.css" rel="Stylesheet" type="text/css" />

	 <script>
	 	$(document).ready( function() {
			console.log('initializing the viewer code');

			$('#zoom-in').bind( 'click', function() {
				var w = parseFloat($('#ot-ww-page-container').css('width'));
				w *= 1.1;
				var h = parseFloat($('#ot-ww-page-container').css('height'));
				h *= 1.1;

				var frame=$('iframe').contents();

				$('#ot-ww-page-container').css('width', w + 'px');
				$('#ot-ww-page-container').css('height', h + 'px');

				$('#ot-ww-main-container').css('width', w + 'px');
				$('#ot-ww-main-container').css('height', h + 'px');

				frame.find('#ot-ww-page-content').css('width', w + 'px');
				frame.find('#ot-ww-page-content').css('height', h + 'px');
			});

			$('#zoom-out').bind( 'click', function() {
				var w = parseFloat($('#ot-ww-page-container').css('width'));
				w *= 0.9;
				var h = parseFloat($('#ot-ww-page-container').css('height'));
				h *= 0.9;

				var frame=$('iframe').contents();

				$('#ot-ww-page-container').css('width', w + 'px');
				$('#ot-ww-page-container').css('height', h + 'px');

				$('#ot-ww-main-container').css('width', w + 'px');
				$('#ot-ww-main-container').css('height', h + 'px');

				frame.find('#ot-ww-page-content').css('width', w + 'px');
				frame.find('#ot-ww-page-content').css('height', h + 'px');
			});
		});
	 </script>
</head>
<body>
	<div id="ot-ww-main" style="position: absolute; top: 50px; left: 220px; width: 640px; height: 480px; overflow: auto; vertical-align: baseline">
		<div id="ot-ww-main-container" tabindex="1" style="position: relative; width: 754px; height: 579pz; vertical-align: baseline">
			<div id="ot-ww-page-buffer" >
				<iframe id="ot-ww-page-container" scrolling="no" src="content.svg" style="width: 754.5968941854304px; height: 579.3882714784745px; -webkit-transform: matrix(1, 0, 0, 1, 0, 0);">
				</iframe>
			</div>
		</div>
		<svg overflow="hidden" width="754.5968941854304" height="579.3882714784745" style="position: absolute; top: 0px; left: 0px;" pointer-events="none">
			<defs></defs>
			<!--
			<g transform="matrix(0.40235297,0.00000000,0.00000000,0.40235297,0.00000000,0.00000000)">
			-->
			<g transform="matrix(0.40235297,0.00000000,0.00000000,0.40235297,0.00000000,0.00000000)">
				<g transform="matrix(2.47422164,0.00000000,0.00000000,-2.47422680,0.00000000,1440.00000000)"><g></g></g>
				<g transform="matrix(2.47422164,0.00000000,0.00000000,-2.47422680,0.00000000,1440.00000000)"><g></g></g>
				<g transform="matrix(2.47422164,0.00000000,0.00000000,-2.47422680,0.00000000,1440.00000000)" pointer-events="visible"></g>
			</g>
			<g></g>
		</svg>
	</div>
	<div>
		<button id="zoom-in">Zoom in</button>
		<button id="zoom-out">Zoom out</button>
	</div>
</body>
</html>
